<template lang="">
    <div>
        <div class="mainBackground">
            <div class="mask"></div>
            <img src="https://i0.hippopx.com/photos/480/253/168/ux-design-webdesign-app-preview.jpg" alt="">
        </div>
        <div class="main-content">
            <div class="main-baseInfo">
                <div class="avatar">
                    <img :src="userInfo.avatar || 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200'" alt="">
                </div>
                <div class="text">
                    <p>{{userInfo.admin}}</p>
                    <p>{{userInfo.signature}}</p>
                </div>
                <div class="elseInfo">
                    <p>{{userInfo.birthDate | initDate}}</p>
                    <p>{{userInfo.district}}</p>
                    <p>{{userInfo.quotations}}</p>
                </div>
            </div>
        </div>
        <div class="logout" @click="toLogin">登陆</div>
    </div>
</template>
<script>
export default {
	data() {
		return {
			userInfo: {
                admin:'帅炸天',
                birthDate:'1991-02-14 17:19:28',
                signature:'自强,宽旷,认真,明朗,热情,高尚,温柔,野蛮 ,泼辣,阴险,稳重, 幼稚 ,暴躁,聪明,内向,开朗 ,善良 ,大方,风趣幽默 ,洒脱 ,孤僻,多重性格,乐天达观,成熟稳重,幼稚调皮',
                quotations:'simple life simple to live',
                district:'广东省深圳市龙岗区坂田街道',
            },
		};
	},
    methods:{
        toLogin(){
            this.$router.push({
                name:'register'
            })
        }
    },
	mounted() {
		this.$axios({
			method: "post",
			url: "/users/inquireUserInfo",
			data: {
				email: JSON.parse(localStorage.chatUser).email,
			},
		})
			.then((res) => {
                Object.assign(this.userInfo,res.data.userInfos[0])
				console.log("res: ", res);
			})
			.catch((err) => {
				console.log("err: ", err);
			});
	},
};
</script>
<style lang="less" scoped>
.mainBackground {
	width: 100%;
	height: 150px;
	overflow: hidden;
	.mask {
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		height: 150px;
		background: whitesmoke;
	}
	img {
		width: 100%;
		opacity: 0.3;
	}
}
.main-content{
    background: #181a239e;
    height: 60vh;
    color: #fff;
    font-size: 16px;
    .main-baseInfo{
        padding: 0 16px;
        text-align: left;
        .avatar{
            width: 60px;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .text{
            p:nth-of-type(1){
                font-weight: 600;
                height:50px;
                line-height: 50px;
            }
            p:nth-of-type(2){
                width: 80%;
                color: #dfdfdf;
                font-size: 12px;
                display:-webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3; //行数
                overflow: hidden
            }
        }
        .elseInfo{
            margin-top: 30px;
            font-size: 12px;
            line-height: 20px;
        }
    }
}
</style>